<template>
  <div>
    <el-card m-b-20>
      <el-table>
        <el-table-column label="部门"></el-table-column>
        <el-table-column label="本年"></el-table-column>
        <el-table-column label="本月任务"></el-table-column>
      </el-table>
    </el-card>

    <el-card>
      <div slot="header"
        :class="$style.header">
        <div>
          <span>选择</span>
          <el-select v-model="select"
            clearable
            @change="filterChange">
            <el-option label="选项"
              value=""></el-option>
          </el-select>
        </div>

        <div :class="$style.search">
          <span>搜索</span>
          <el-input v-model="search"
            clearable
            @clear="filterChange"></el-input>
        </div>

        <el-date-picker v-model="date"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          @change="filterChange"></el-date-picker>

        <el-button type="text"
          @click="filterChange">搜 索</el-button>
        <div space></div>
        <el-button type="primary">新 增</el-button>
      </div>

      <el-table :data="tableData"
        m-b-10>
        <el-table-column v-for="(item, index) of tableColumns"
          :key="index"
          :label="item.label"
          :prop="item.prop"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button size="mini"
              type="warning"
              @click="openSet(row)">设置任务</el-button>
            <el-button size="mini"
              type="warning"
              @click="openEdit(row)">修改任务</el-button>
            <el-button size="mini"
              type="warning"
              @click="openAdd(row)">增加任务</el-button>
          </template>
        </el-table-column>
      </el-table>

      <BasePagination :max="maxPage"
        :now.sync="nowPage"></BasePagination>
    </el-card>

    <EditTask ref="EditTask"
      :type="editTaskType"></EditTask>
    <AddTask ref="AddTask"></AddTask>
  </div>
</template>

<script>
import BasePagination from '@/components/BasePagination'
import { views } from '@/mixins'
import AddTask from './components/Task/AddTask'
import EditTask from './components/Task/EditTask'

export default {
  

  components: {
    BasePagination,
    AddTask,
    EditTask
  },

  mixins: [views],

  data() {
    return {
      tableData: [{}],
      tableColumns: [
        {
          label: '姓名',
          prop: ''
        },
        {
          label: '职务',
          prop: ''
        },
        {
          label: '当年任务',
          prop: ''
        },
        {
          label: '当年任务',
          prop: ''
        }
      ],
      search: '',
      select: '',
      date: [],

      maxPage: 1,
      nowPage: 1,

      editTaskType: ''
    }
  },

  watch: {
    nowPage() {
      this.getData()
    }
  },

  methods: {
    init(to, from) {
      this.getData()
    },

    getData() {},

    filterChange() {
      this.nowPage === 1 ? this.getData() : (this.nowPage = 1)
    },

    openSet(data) {
      this.editTaskType = 'set'
      this.$refs.EditTask.isDialog = true
    },

    openEdit(data) {
      this.editTaskType = 'edit'
      this.$refs.EditTask.isDialog = true
    },

    openAdd(data) {
      this.$refs.AddTask.isDialog = true
    }
  }
}
</script>

<style lang="scss" module>
.header {
  display: flex;
  align-items: center;

  > div {
    flex-grow: 0;
    flex-shrink: 0;

    &:not(:last-child) {
      margin-right: 20px;
    }

    > span {
      margin-right: 5px;
    }
  }

  .search {
    display: flex;
    align-items: center;

    > div {
      width: 200px;
    }
  }

  [space] {
    flex-grow: 1;
  }
}
</style>
